<template>
  <!-- FBA发货看板 -->
  <div class="fba-report-wrap">
    <a-tabs v-model:active-key="currentTab" size="mini">
      <a-tab-pane key="realTime" title="发货单实时看板" />
      <a-tab-pane key="report" title="发货单报表" />
    </a-tabs>
    <div class="fba-real-time-w" v-if="currentTab == 'realTime'">
      <FbaRealTimeBoardByUser :userList="userList" :deptList="deptList" />
      <FbaRealTimeBoardByShop :shopList="shopList" />
    </div>
    <div class="fba-report-w" v-if="currentTab == 'report'">
      <a-radio-group type="button" v-model="modelType" style="margin-bottom: 10px">
        <a-radio value="user">按销售员报表</a-radio>
        <a-radio value="shop">按店铺报表</a-radio>
      </a-radio-group>
      <FbaReportBoardByUser :userList="userList" :deptList="deptList" v-if="modelType == 'user'" />
      <FbaReportBoardByShop :shopList="shopList" v-if="modelType == 'shop'" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import FbaRealTimeBoardByUser from './fbaRealTimeBoardByUser.vue'
  import FbaRealTimeBoardByShop from './fbaRealTimeBoardByShop.vue'
  import FbaReportBoardByUser from './fbaReportBoardByUser.vue'
  import FbaReportBoardByShop from './fbaReportBoardByShop.vue'
  import useBaseDataStore from '@/store/modules/base-data'
  import { getOrganizes } from '@/api/system'

  onMounted(() => {
    getUserList()
    getDept()
    getShopList()
  })
  const useBaseData = useBaseDataStore()
  const currentTab = ref('realTime')
  const modelType = ref('user')
  const deptList = ref<Array<any>>([])
  const userList = ref<Array<any>>([])
  const shopList = ref<Array<any>>([])

  // 获取部门
  async function getDept() {
    const res: any = await getOrganizes()
    deptList.value = res?.data
  }
  // 获取店铺列表
  async function getShopList() {
    await useBaseData.getShopList()
    shopList.value = useBaseData.shopList
  }
  // 获取所有用户列表
  async function getUserList() {
    await useBaseData.getUserList()
    userList.value = useBaseData.userList
  }
</script>
<style lang="less" scoped>
  :deep(.arco-tabs-nav-tab) {
    background-color: #fff;
  }
  .fba-real-time-w {
    height: calc(100vh - @menuAndTabHeight);
    display: flex;
  }
  .fba-report-w {
    height: calc(100vh - @menuAndTabHeight);
    background-color: #fff;
    padding: 10px 20px;
  }
  :deep(.arco-radio-group-button) {
    padding: 0;
    .arco-radio-button {
      margin: 0;
      background-color: #fff;
      line-height: 30px;
      border: 1px solid var(--color-border);
      &:first-child {
        border-radius: 5px 0 0 5px;
      }
      &:last-child {
        border-radius: 0 5px 5px 0;
      }
    }
    .arco-radio-checked {
      border-color: rgb(var(--primary-6));
    }
  }
</style>
